<template>
  <div>
    <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
      <el-form-item label="电影名称">
        <el-input
          placeholder="请输入关键字"
          v-model="name"
          @keyup.native.enter="search"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">电影列表</el-divider>
    <!-- 电影列表 -->
    <el-table :data="movieData.result">
      <el-table-column
        label="电影封面"
        prop="cover"
        width="100px"
        align="center"
      >
        <template slot-scope="scope">
          <img :src="scope.row.cover" alt="" width="60px" />
        </template>
      </el-table-column>
      <el-table-column
        label="电影名称"
        prop="title"
        align="center"
      ></el-table-column>
      <el-table-column
        label="主演"
        prop="star_actor"
        align="center"
      ></el-table-column>
      <el-table-column
        label="上映时间"
        prop="showingon"
        width="120px"
        align="center"
      ></el-table-column>
      <el-table-column label="时长" prop="duration" width="80px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.duration }}分钟</span>
        </template>
      </el-table-column>
      <el-table-column
        label="所属类别"
        prop="type"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="180px" align="center">
        <template slot-scope="scope">
        <el-button
          @click="$router.push('/home/movie-update/'+scope.row.id)"
          size="small"
          type="warning"
          icon="el-icon-edit"
          circle
        ></el-button>
        <el-button
          size="small"
          type="danger"
          icon="el-icon-delete"
          circle
          @click="del(scope.row.id)"
        ></el-button>
         </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="movieData.total"
      :page-size="movieData.pagesize"
      :current-page="movieData.page"
      background
      layout="->,prev, pager, next,jumper,total"
      @current-change="changeCurrentPage"
    ></el-pagination>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      name: "", //查询关键字
      movieData: {
        //保存电影数据
        page: 1, //当前页码
        pagesize: 3, //每页条数
        total: 0, //总条目数
        result: [], //电影列表
      },
    };
  },

  methods: {
    // 点击按钮删除电影
    del(id){
       this.$confirm('此操作将永久删除该电影, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           httpApi.movieApi.delete({id}).then(res=>{
            console.log(res)
            this.search()
            }),
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 提交表单查询
    submit(){
      this.movieData.page = 1
      this.search()
    },
    // 模糊查询电影列表
    search() {
      if (this.name.trim()) {
        let params = {
          name:this.name,
          page:this.movieData.page,
          pagesize:this.movieData.pagesize
        }
        httpApi.movieApi.queryMovieByName(params).then((res) => {
          this.movieData = res.data.data;
          console.log(res);
        });
      } else {
        this.queryMovies();
      }
    },
    // 改变当前页码
    changeCurrentPage(page) {
      this.movieData.page = page; //修改当前页
      this.search(); //重新加载当前页的电影列表
    },

    // 查询电影列表:根据当前页码发送请求加载电影列表数据
    queryMovies() {
      let params = {
        page: this.movieData.page,
        pagesize: this.movieData.pagesize,
      };
      httpApi.movieApi.queryAll(params).then((res) => {
        this.movieData = res.data.data;
      });
    },
  },

  // 组件挂载完毕后执行
  mounted() {
    this.queryMovies();
  },
};
</script>

<style lang="scss" scoped>
</style>